<template>
  <div class="dashboard-container">
    <div class="app-container info-card" style="padding-bottom: 40px">
      <div>
        <div class="border">
          <el-row :gutter="20" class="mb">

          </el-row>
          <el-row :gutter="20" class="mb">
            <el-col :span="6">
              <div class="grid-content bg-purple">【题型】：{{info.questionType |famtquestionType}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">【编号】：{{info.id}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">【难度】：{{info.difficulty |famtdifficulty}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">【标签】：{{info.tags}}</div>
            </el-col>

          </el-row>
          <el-row :gutter="20" class="mb">
            <el-col :span="6">
              <div class="grid-content bg-purple">【学科】：{{famtsubjectID(info.subjectID)}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">【目录】：{{info.catalogID}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">【方向】：{{info.direction}}</div>
            </el-col>
          </el-row>
        </div>
        <div class="border">
          <el-row :gutter="20" class="mb mt20">
            <el-col>【题干】:</el-col>
          </el-row>
          <div class="pl20">
            <p>{{info.question}}</p>
            <p>{{info.questionType | formType}}题选项：（以下选中的选项为正确答案）</p>
            <p v-for="item in info.options" :key="item">
              <el-radio v-model="radio" :label="item.isRight===1">{{item.code}}</el-radio>
            </p>
          </div>
        </div>
        <div class="border">
          <el-row :gutter="20" class="mb mt20">
            <el-col>【参考答案】:
            <el-button type="danger" @click="showDialog=true">视频答案预览</el-button>
            <video :src="info.videoURL" style="width:100%;height:100%" v-show="showDialog" controls></video>
            </el-col>
          </el-row>
        </div>
        <div class="border">
          <el-row :gutter="20" class="mb mt20">
            <el-col>【答案解析】:</el-col>
          </el-row>
          <span class="pl20">{{info.answerID}}</span>
        </div>
        <div>
          <el-row :gutter="20" class="mb mt20">
            <el-col>【题目备注】:</el-col>
          </el-row>
          <p class="pl20">{{info.remarks}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { difficulty, questionType } from '@/api/hmmm/constants'
export default {
  name: 'QuestionsPreview',
  props: ['info', 'subjectlist'],
  data () {
    return {
      radio: '',
      showDialog: false
    }
  },
  methods: {
    async getInfo () {
      const a = await detail({ id: this.id, isNext: false })
      this.info = a.data
    },
    famtsubjectID (value) {
      if (value > 0) {
        const b = this.subjectlist.find(item => {
          if (Number(item.value) === Number(value)) {
            return item
          }
        })
        return b.label
      } else {
        return ''
      }
    }

  },
  filters: {

    famtquestionType (value) {
      if (value > 0) {
        const c = questionType.find(item => {
          if (item.value === Number.parseInt(value)) {
            return true
          }
        })
        return c.label
      } else {
        return ''
      }
    },
    famtdifficulty (value) {
      if (value > 0) {
        const d = difficulty.find(item => {
          if (item.value === Number.parseInt(value)) {
            return true
          }
        })
        return d.label
      } else {
        return ''
      }
    },
    formType (value) {
      if (value === '1') {
        return '单选'
      }
      if (value === '2') {
        return '多选'
      }
    }
  },

  async created () {
  }
  // eslint-disable-next-line no-dupe-keys

}
</script>

<style scoped>
.mb {
  margin-bottom: 20px;
}
.mt20 {
  margin-top: 20px;
}
.pl20 {
  padding-left: 30px;
}
.border {
  border-bottom: 1px solid #ccc;
}
.info-card {
  border: 1px solid #ccc;
  padding: 15px;
}
</style>
